<html>
<head>
<title>{{ titulo }}</title>
<link type="text/css" rel="stylesheet" href="/static/css/main.css">
<link type="text/css" rel="stylesheet"
	href="/static/css/jquery.dataTables.css">
<link type="text/css" rel="stylesheet"
	href="/static/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" href="{{ config.theme }}" type="text/css" />
<script type="text/javascript"
	src="https://www.google.com/jsapi?key=ABQIAAAAHgOg6huaKJAv9G24UHf1KBT-_2ssS9ZvfOvr1Ca1c9UJDHLkmhQMLz6VvDl-zLZ9USIlHGHxy3IcGg"></script>
<script type="text/javascript">
	google.load("jquery", "1.6.4");
	google.load("jqueryui", "1.8.16");
</script>
<script type="text/javascript" src="/static/js/funciones.js"></script>
<script type="text/javascript" src="/static/js/ui.datepicker-es.js"></script>
<script type="text/javascript" src="/static/js/jquery.dataTables.js"></script>
<script type="text/javascript">
	var eventos;
	function pintarTabla() {
		eventos = $('#eventos').dataTable({
			"sScrollX" : "100%",
			"bPaginate" : false,
			"bLengthChange" : false,
			"bFilter" : true,
			"bSort" : false,
			"bInfo" : false,
			"bJQueryUI" : true,
			"bAutoWidth" : false,
			"bSortClasses" : false
		});
	}
	$(function() {
		pintarTabla();
		var dates = $("#from, #to")
				.datepicker(
						{
							defaultDate : "+1w",
							changeMonth : true,
							numberOfMonths : 1,
							onSelect : function(selectedDate) {
								var option = this.id == "from" ? "minDate"
										: "maxDate", instance = $(this).data(
										"datepicker"), date = $.datepicker
										.parseDate(
												instance.settings.dateFormat
														|| $.datepicker._defaults.dateFormat,
												selectedDate, instance.settings);
								dates.not(this).datepicker("option", option,
										date);
								var from = $("#from").val();
								var to = $("#to").val();
								var tarea = $("#tarea").val();
								if (from != "" && to != "") {
									eventos.fnClearTable();
									$
											.post(
													"/nucleo/eventos/",
													{
														'from' : from,
														'to' : to,
														'tarea' : tarea
													},
													function(data) {
														if (data != null) {
															$
																	.each(
																			data.eventos,
																			function(
																					key,
																					val) {
																				eventos
																						.fnAddData([
																								val.codigo,
																								val.inicio,
																								val.fin,
																								val.hora ]);
																			});
														}
													}, "json")
											.error(
													function() {
														$("#mssger")
																.html(
																		"No se han encontrado datos");
														$("#mssger").dialog(
																"open");
													});
								}
							}
						});
		$("#tarea").change(
				function() {
					var from = $("#from").val();
					var to = $("#to").val();
					var tarea = $("#tarea").val();
					eventos.fnClearTable();
					$.post(
							"/nucleo/eventos/",
							{
								'from' : from,
								'to' : to,
								'tarea' : tarea
							},
							function(data) {
								if (data != null) {
									$.each(data.eventos, function(key, val) {
										eventos
												.fnAddData([ val.codigo,
														val.inicio, val.fin,
														val.hora ]);
									});
								}
							}, "json").error(function() {
						$("#mssger").html("No se han encontrado datos");
						$("#mssger").dialog("open");
					});
				});
	});
</script>
</head>
<body>
	<table class="tablaMsj">
		<tr id="inicio">
			<td align="right"><a id="volver" class="volver"
				href="{{ volver.url }}">{{ volver.nombre }}</a>&nbsp;<a id="alogin"
				class="logout" href="{{ url }}">{{ url_linktext }}</a></td>
		</tr>
	</table>
	<table>
		<tr>
			<td><label for="from">Desde:</label><input type="text" id="from"
				name="from" /></td>
			<td><label for="to">Hasta:</label><input type="text" id="to"
				name="to" /></td>
               <td><label for="to">Tarea:</label><input type="text" id="tarea"
                   name="tarea" /></td>
		</tr>
	</table>
	<table style="width: 100%">
		<tr>
			<td><table id="eventos">
					<thead>
						<tr>
							<th>C&oacute;digo</th>
							<th>Inicio</th>
							<th>Fin</th>
							<th>Horas</th>
						</tr>
					</thead>
				</table></td>
		</tr>
	</table>
</body>
</html>